import { FC,  useEffect } from 'react'
import {  Modal,  Form, Input, Select } from 'antd';

const { Option } = Select;

const MyModel:FC<any> = (props) => {
  const {
    handleOk,
    handleCancel,
    getFormInstance,
    visible,
    confirmLoading } = props;
  const [form] = Form.useForm();



  useEffect(() => {
    // 通过子父传参，将form传递给父组件
    getFormInstance(form)
  }, [form])

  return <div>
      <Modal
        title="展示信息"
        visible={visible}
        onOk={() => handleOk(form)}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <Form form={form} name="control-hooks" >
          <Form.Item name="price" label="价格" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="imgUrl" label="图片" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="skuCount" label="数量" rules={[{ required: true }]}>
            <Select
              placeholder="Select a option and change input text above"
              // onChange={onGenderChange}
              allowClear
            >
              <Option value="10">10</Option>
              <Option value="5">5</Option>
              <Option value="20">20</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
  </div>
}
export default MyModel;
